<template>
	<div class="dashboard">
		<el-row :gutter="18">
			<el-col :span="24">
				<order-bar-chart :data="orderBarData" />
			</el-col>
		</el-row>
		<el-row :gutter="18" style="margin-top: 18px;">
			<el-col :span="24">
				<processing-order-table :data="processingOrderData" />
			</el-col>
		</el-row>
		<el-row :gutter="18" style="margin-top: 18px;">
			<el-col :xs="24" :sm="8">
				<health-pie :data="healthPieData" />
			</el-col>
			<el-col :xs="24" :sm="8">
				<AGVDonut :data="agvData" />
			</el-col>
			<el-col :xs="24" :sm="8">
				<inventory-bar :data="inventoryData" />
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import OrderBarChart from './components/OrderBarChart.vue'
import ProcessingOrderTable from './components/ProcessingOrderTable.vue'
import HealthPie from './components/HealthPie.vue'
import AGVDonut from './components/AGVDonut.vue'
import InventoryBar from './components/InventoryBar.vue'

// 下面是模拟数据
const orderBarData = [
	{ month: 'Jan', done: 20, planned: 24 },
	{ month: 'Feb', done: 10, planned: 12 },
	{ month: 'Mar', done: 30, planned: 31 },
	{ month: 'Apr', done: 37, planned: 39 },
	{ month: 'May', done: 34, planned: 34 },
	{ month: 'Jun', done: 37, planned: 38 },
	{ month: 'Jul', done: 24, planned: 23 },
	{ month: 'Aug', done: 30, planned: 32 },
	{ month: 'Sep', done: 36, planned: 37 },
	{ month: 'Oct', done: 12, planned: 15 }
]
const processingOrderData = [
  { index: 1, orderNo: 'O202406001', customer: '国药控股股份有限公司', product: '全自动制剂灌装线', date: '2024-06-01 09:30:00', job1: 50, job2: 15, job3: 30, job4: 15, job5: 100, job6: 14, deliver: '2024-07-01 17:00:00' },
  { index: 2, orderNo: 'O202406002', customer: '山东新华医疗股份有限公司', product: '智能瓶装检测系统', date: '2024-06-02 13:22:10', job1: 10, job2: 15, job3: 30, job4: 15, job5: 10, job6: 11, deliver: '2024-07-06 11:00:00' },
  { index: 3, orderNo: 'O202406003', customer: '华润医药集团有限公司', product: '高效片剂压片机', date: '2024-06-03 11:20:22', job1: 10, job2: 14, job3: 11, job4: 42, job5: 7, job6: 0, deliver: '2024-07-10 08:30:00' },
  { index: 4, orderNo: 'O202406004', customer: '江苏恒瑞医药股份有限公司', product: '注射剂无菌生产线', date: '2024-06-04 15:41:12', job1: 230, job2: 180, job3: 280, job4: 0, job5: 0, job6: 20, deliver: '2024-07-15 16:00:00' },
  { index: 5, orderNo: 'O202406005', customer: '云南白药集团股份有限公司', product: '中药提取罐组', date: '2024-06-05 17:17:54', job1: 460, job2: 460, job3: 460, job4: 0, job5: 0, job6: 20, deliver: '2024-07-20 14:00:00' },
  { index: 6, orderNo: 'O202406006', customer: '上海医药集团股份有限公司', product: '口服液自动包装线', date: '2024-06-06 08:45:35', job1: 210, job2: 200, job3: 210, job4: 130, job5: 0, job6: 15, deliver: '2024-07-25 09:30:00' }
]

const healthPieData = { value: 12, max: 20 }
const agvData = { idle: 29, busy: 71 }
const inventoryData = [
	{ job: 'Job1', value: 45 },
	{ job: 'Job2', value: 20 },
	{ job: 'Job3', value: 30 },
	{ job: 'Job4', value: 38 },
	{ job: 'Job5', value: 23 },
	{ job: 'Job6', value: 13 }
]
</script>
  
